<template>
    <div class="controls">
      <button @click="act.run = !act.run">{{ act.run ? '关闭' : '开启' }}动画</button>
      <label>
        自转速度：
        <input type="range" v-model.number="act.speed" min="0" max="5" step="0.1">
        {{ act.speed }}x
      </label>
    </div>
    <div class="animation-wrapper">
    <div class="animation-box">
      <BeltAnimation 
        :run-earth="act.micrologix1400.MicrologixT.b3_17"
        :speed="act.micrologix1400.MicrologixT.M_N7_1"
        class="belt-animation"
      />
    </div>
  </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import BeltAnimation from '../svgEditing/elements/BeltAAnimation.vue';
  import { act } from '../websocket';
 
  

</script>
<style scoped>
.animation-wrapper {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  height: 100vh;            /* 根据需要设置高度，比如占满视口 */
}

.animation-box {
  width: 600px;
  height: 400px;
  /* border: 1px solid #ccc; */
}

.belt-animation {
  width: 100%;
  height: 100%;
}
</style>